Skip to content

Blue default ink, theme-following canvas chrome, sponsors, and a showcase - #13

Merged
nmndwivedi merged 12 commits into
mainfrom
feat/blue-ink-dark-chrome-sponsors
Aug 2, 2026
Merged

Blue default ink, theme-following canvas chrome, sponsors, and a showcase#13
nmndwivedi merged 12 commits into
mainfrom
feat/blue-ink-dark-chrome-sponsors

Conversation

@nmndwivedi

Copy link
Copy Markdown
Collaborator

What's in here

1. Default ink is blue. DEFAULT_STYLES.color is now blue in the core editor. Sticky notes keep their yellow paper when the pen is on the default ink.

2. All canvas chrome follows the theme. The dock, actions pill, popovers, and the app's logo / file bar / files menu were dark glass in both themes. They now render light glass with dark ink on light paper, and the original dark glass on dark — driven by --qd-* custom properties in quickdraw.css plus matching vars in the app's index.html.

3. Theme switching is smooth. setTheme() freezes the outgoing canvas as a bitmap and fades it out over 320ms (skipped under prefers-reduced-motion, cleaned up on destroy()), and every chrome surface transitions on the same clock, so the whole switch reads as one motion instead of a hard cut.

4. Sponsors. A self-updating sponsor wall:

  • .github/workflows/sponsors.yml pulls active public sponsors from the GitHub Sponsors GraphQL API daily into docs/sponsors.json; the site reads that snapshot at build time
  • One shared SponsorWall.astro renders the homepage teaser (top 8, then "+N more →") and the full /sponsors page
  • No tiers, no prices — a flat row of avatar chips, with a designed empty state whose ghost slots fade out symmetrically from a live "Your logo here" invite
  • Every CTA links straight to GitHub Sponsors checkout
  • .github/FUNDING.yml lights up the repo's Sponsor button

5. Made with Quickdraw. README showcase table plus a CONTRIBUTING section documenting the add-a-row-and-open-a-PR flow.

6. Org rename. Every GitHub and Sponsors URL across the repo now points at quickdrawjs/quickdraw and sponsors/quickdrawjs.

Verified

  • 125 tests pass, typecheck clean, website builds (18 pages incl. /sponsors), React Native bundle regenerated
  • Browser-checked: blue ink, chrome following the theme in both modes, the crossfade element appearing during a switch and removing itself after, and the sponsor wall in both empty and populated states

Note

The wall ships empty and fills itself once the GitHub Sponsors profile is approved. If the first workflow run can't read sponsorships with the default Actions token, add a classic PAT with read:org as a repo secret named SPONSORS_TOKEN — the workflow prefers it automatically.

🤖 Generated with Claude Code

nmndwivedi and others added 12 commits August 2, 2026 17:41
…ors, showcase

- Default pen color is now blue; sticky notes still default to yellow paper
  when the pen is on the default ink.
- The app's logo, file bar, and files menu now share the dock's dark glass
  in both themes, so every bar on the canvas stays dark in light mode.
- Theme switches crossfade: the outgoing canvas is frozen as a bitmap and
  faded out (respects prefers-reduced-motion), and the board background
  transitions in CSS.
- New sponsors system on the website: config-driven wall (lib/sponsors.js),
  homepage section with a designed empty state and per-tier caps that roll
  overflow into a dedicated /sponsors page, payments via GitHub Sponsors,
  plus .github/FUNDING.yml for the repo Sponsor button.
- README gains Made with Quickdraw + Sponsors sections; CONTRIBUTING.md
  documents the add-your-project-via-PR flow.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The dock, actions pill, popovers, and the app's logo/file bar/files menu
were dark glass in both themes. They now theme properly — light glass with
dark ink on the light paper, the original dark glass on dark — driven by
--qd-* custom properties in quickdraw.css (and matching vars in the app's
index.html). The surfaces transition background/color/border over 320ms,
the same clock as the board's theme crossfade, so the whole switch reads
as one smooth motion.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The repo is moving from the personal account to the quickdrawjs GitHub
organization (matches the @quickdrawjs npm scope). All GitHub and Sponsors
URLs — README badges, package.json repository fields, website consts,
sponsors config, FUNDING.yml, issue templates, blog posts, docs layout,
star-history script — now reference quickdrawjs/quickdraw and
sponsors/quickdrawjs. GitHub redirects the old URLs after the transfer.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…r pages

The sponsor wall now feeds itself, mirroring the star-history pipeline:
a daily workflow (.github/workflows/sponsors.yml) pulls active public
sponsors from the GitHub Sponsors GraphQL API into docs/sponsors.json,
and the site reads that snapshot at build time. Sponsors appear with
their GitHub avatar and name, sorted into Gold/Silver/Backer rows by
monthly amount; OVERRIDES in sponsors.js swaps an avatar for a real
logo, and EXTRA_SPONSORS covers off-GitHub supporters.

Dollar amounts are gone from the tiers UI — the tier cards list only
placement perks, and pricing lives where it belongs, on the GitHub
Sponsors checkout.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
No tier cards, no Gold/Silver/Backer grouping, no prices. The sponsors
page is now the invite plus the wall: empty, the 'nobody's here yet'
card; populated, a flat row of avatar chips synced daily from GitHub
Sponsors, with a dashed 'your logo' slot as the standing invite. The
homepage section matches, capped with a '+N more on GitHub' link.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…state

The homepage section and /sponsors now render the same SponsorWall.astro.
Its empty state merges the two previous ones: the ghost logo row with a
live 'your logo here' slot on top, then the heart, 'Nobody's here yet',
the founding-sponsor line, and the CTA — one dashed card instead of two
competing treatments. Populated, it's the same flat chip row everywhere,
capped on the homepage via the cap prop.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… copy

The homepage section is now a teaser for the dedicated page: top 8
sponsors by monthly amount (ties broken by seniority), a compact
empty-state line, and every link — the your-logo slot, '+N more', the
CTA — going to /sponsors. The dedicated page shows the full wall and
sends its CTAs straight to GitHub Sponsors checkout.

Dropped the 'founding sponsors stay marked for life' promise: it made a
lifetime placement obligation out of any one-off donation and
contradicted the sync design. The wall now promises exactly what it
does — mirror GitHub Sponsors daily, on the wall while active, roll off
when lapsed, one-time donations age out when GitHub stops counting them.
Long sponsor names truncate with an ellipsis so a single entry can't
break the row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The wall read awkwardly: a left-ragged heading and a hard-left ghost row
above a centered pitch. Both pages now center on one axis — the empty
state fades ghost slots out symmetrically from the live 'your logo here'
slot in the middle, the populated row centers too, and the surrounding
headings and copy follow (the /sponsors page reads as a pitch page, not
a doc).

The homepage now renders the same full pitch card as /sponsors instead
of its own compact one-liner; only the links differ (homepage sends
people to /sponsors, /sponsors sends them to GitHub checkout). Dropped
'An empty wall means the first logos get all the attention.'

A dead avatar URL now removes itself rather than leaving a broken glyph
— the name alone still reads as a finished chip.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The homepage previously routed its 'your logo' slot and buttons through
/sponsors. Now every call to action on both pages links directly to
github.com/sponsors/quickdrawjs — one click from anywhere to checkout.
The only remaining link to /sponsors is the '+N more' overflow count,
which is the one thing that page uniquely holds.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The row's overflow:hidden (which keeps the ghosts on one line running off
both edges) was also shaving the top off the 'your logo here' slot when it
lifted on hover. A padding/negative-margin pair gives 10px of vertical
room — overflow clips at the padding edge, so the sideways hiding still
works while the 2px lift and its shadow clear the crop.

Headings and lede go back to left-aligned on both pages, matching every
other section; only the wall card centers its own contents.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Aug 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
quickdraw-app Ready Ready Preview Aug 2, 2026 8:22pm
tryquickdraw Ready Ready Preview Aug 2, 2026 8:22pm
tryquickdraw-docs Ready Ready Preview Aug 2, 2026 8:22pm

@nmndwivedi
nmndwivedi merged commit a5c4eff into main Aug 2, 2026
5 checks passed
@nmndwivedi
nmndwivedi deleted the feat/blue-ink-dark-chrome-sponsors branch August 2, 2026 20:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant